<template>
    <div class="partnerList">
        <div class="partnerList_top">
			<div class="into_index">首页<i class="el-icon-close"></i></div>
			<div class="current">直播列表<i class="el-icon-close"></i></div>
		</div>
        <div class="partnerList_bottom">
            <div class="partnerList_bottom_new">
				<div class="partnerList_bottom_new_goods">
					<div class="partnerList_bottom_new_goods_btn">
						<button @click="addRecommend"><i class="el-icon-trophy"></i>新增直播</button>
					</div>
					<div class="partnerList_bottom_new_goods_screening">
						<div class="regionSelect">
                            直播类型
                            <el-select v-model="valueType" clearable @change="selectType" placeholder="请选择">
                                <el-option
                                v-for="item in typeList"
                                :key="item.value"
                                :label="item.name"
                                :value="item.value">
                                </el-option>
                            </el-select>
							直播分类
							<el-select v-model="valueCate" clearable @change="selectCate" placeholder="请选择">
                                <el-option
                                v-for="item in cateList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                                </el-option>
                            </el-select>
						</div>
						<div class="partnerList_bottom_new_goods_screening_right">
							<el-input v-model="input" placeholder="请输入"></el-input>
							<button @click="handerSeach"><i class="el-icon-search"></i>搜索</button>
						</div>
					</div>
				</div>
			</div>
            <div class="partnerList_table">
                <div class="partnerList_bottom_table">
					<table>
						<tr>
							<th></th>
							<th>序号</th>
							<th>直播名</th>
							<th>类型</th>
							<th>分类</th>
							<th>推流二维码</th>
							<!-- <th>直播人</th> -->
							<!-- <th>直播商品</th> -->
							<th>观看人数</th>
							<th>点赞人数</th>
							<th>直播状态</th>
							<th>操作</th>
						</tr>
						<tr v-for="(v,i) in tableList" :key="i">
							<td>
								<font class="checkbox" :class="{'check_active' : checkBoxAll.includes(i)}" @click="handlerCheckbox(i)"><i class="el-icon-check"></i></font>
							</td>
							<td>{{v.id}}</td>
							<td>{{v.title}}</td>
							<td>{{v.type==0?'普通':v.type==1?'设计师':v.type==2?'施工队':v.type==3?'商家':v.type==4?'小区':''}}</td>
							<td>{{v.category_name}}</td>
							<td>
								<el-button type="primary" style="width:90px;" size="mini" @click="viewQrImg(v.push_url,v.expire_time)">点击查看</el-button>
							</td>
							<!-- <td>{{v.id}}</td> -->
							<!-- <td>{{v.id}}</td> -->
							<td>{{v.watch_num}}</td>
							<td>{{v.support_num}}</td>
							<td>{{v.status==0?'关闭':v.status==1?'直播中':''}}</td>
							<td>
								<button class="editor" :class="{'delete':v.status==1}"  @click="toChange(v.id,v.status,v.expire_time)">{{v.status==0?'开启':'关闭'}}</button>
								<button class="yellow" @click="toEdit(v.id)">详情</button>
								<button class="shelves" @click="toDel(v.id)">删除</button>
							</td>
						</tr>
						<tr v-if="tableList.length == 0"><td class="table_title" colspan="10">当前数据空空如也</td></tr>
					</table>
					<div class="partnerList_bottom_page">
						<div class="partnerList_bottom_page_left">
							<div class="partnerList_bottom_page_left_checkAll" @click="handerCheckAll">
								<font class="checkbox" :class="{'check_active' : checkAll}"><i class="el-icon-check"></i></font>
							</div>全选
							<!-- <button class="partnerList_bottom_page_left_btn" @click="selectDel">删除</button> -->
						</div>
						<div class="partnerList_bottom_page_right">
							<el-pagination
								@size-change="handleSizeChange"
								@current-change="handleCurrentChange"
								:current-page="page"
								:page-sizes="[10, 20, 30, 40]"
								:page-size="pageSize"
								layout="total, sizes, prev, pager, next, jumper"
								:total="total"
								background>
							</el-pagination>
						</div>
					</div>
				</div>
            </div>
        </div>
        <el-dialog
			title="推流二维码"
			:visible.sync="dialogVisible"
			width="25%"
			@closed="closedFn">
			<div class="qrBox">
				<div class="qrcode" ref="qrCodeUrl"></div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
			</span>
		</el-dialog>
    </div>
</template>

<script>
import QRCode from 'qrcodejs2'
export default {
		
    data(){
        return{
            cate:{},
             input: '',
			checkAll:false,
			page:1,
			pageSize:10,
			total:0,
            checkBoxAll:[],				// 选中的数据
			shelvesAlls:[],
            tableList:[],
            cateList:[],//分类数据
            valueCate:'',
            typeList:[{
                name:'普通',
                value:0
            },{
                name:'设计师',
                value:1
            },{
                name:'施工队',
                value:2
            },{
                name:'商家',
                value:3
            },{
                name:'小区',
                value:4
            }],
            valueType:'',
			dialogVisible:false,
			nowTime:0

        }
    },
	mounted(){
		this.nowTime = new Date().getTime()
		console.log(this.nowTime,'00000');
		this.getEstateList()
        this.getCateList()
	},

    methods:{
		// 获取直播列表
		getEstateList(){
			let params = {
				keyword:this.input,
                category_id:this.valueCate,
                type:this.valueType,
				page:this.page,
				pagesize:this.pageSize
			}
			this.$http.post('/api/root/Live/index',params).then(res=>{
				console.log(res,'直播列表');
				if(res.code==1){
					this.tableList = res.data.list?res.data.list:[]
					this.total = res.data.total
				}
			})
		},
		

        // 获取分类列表
        getCateList(){
            this.$http.post('/api/root/LiveCategory/getList').then(res=>{
                console.log(res,'分类列表');
                if(res.code==1){
                    this.cateList = res.data?res.data:[]
                }
            })
        },

        // 选择分类
        selectCate(){
			this.getEstateList()
        },

        // 选择直播类型
        selectType(){
			this.getEstateList()
        },
	
        // 删除按钮
        toDel(id){
            this.$confirm('确定删除该直播吗？','提示',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.post('/api/root/Live/del',{id}).then(res=>{
                    console.log(res,'删除结果');
                    if(res.code==1){
                        this.$message.success('删除成功')
                        this.getEstateList()
                    }else{
                        this.$message.warning(res.msg)
                    }
                })
            }).catch(()=>{
                console.log('点击取消');
            })
        },
        
        // 搜索
        handerSeach(){
            this.getEstateList()
		},

		// 详情按钮
		toEdit(id){
			this.$router.push({name:'liveDetail',query:{id}})
		},

        // 状态选择
        statusSelectFn(e){
            console.log(e,'状态选择');
            this.getInfoList()
        },

		// 更改状态
		toChange(id,sta,time){
			if(time && time*1000<this.nowTime){
				this.$message.warning('直播已失效')
				return
			}
			let status = sta==0?1:0;
			this.$http.post('/api/root/Live/changeStatus',{id,status}).then(res=>{
				console.log(res,'状态更改结果');
				if(res.code==1){
					this.$message.success('操作成功')
					this.getEstateList()
				}else{
					this.$message.warning(res.msg)
				}
			})
		},

        // 新增资讯按钮
        addRecommend(){
            this.$router.push({name:'liveDetail',query:{}})
        },

		// 点击查看推流二维码
		viewQrImg(data,time){
			if(time && time*1000<this.nowTime){
				this.$message.warning('直播已失效')
				return
			}
			this.dialogVisible = true
			this.creatQrCode(data)
		},
		closedFn(){
			this.$refs.qrCodeUrl.innerHTML=''
		},
		// 生成二维码
        creatQrCode(data) {
			this.$nextTick(function(){
				var qrcode = new QRCode(this.$refs.qrCodeUrl, {
					text: data, // 需要转换为二维码的内容
					width: 160,
					height: 160,
					colorDark: '#000000',
					colorLight: '#ffffff',
					correctLevel: QRCode.CorrectLevel.H
				})
			})
		},
          // 多选
			handlerCheckbox(i){
                console.log(i);
				let arr = this.checkBoxAll;
				if(arr.includes(i)){
					let index = arr.indexOf(i);
					if(index != -1){
						arr.splice(index,1);
						this.shelvesAlls.splice(index,1);
						if(this.checkBoxAll.length !== this.tableList.length) {
							this.checkAll = false;
						}
					}
				}else {
					this.checkBoxAll.push(i);
					this.shelvesAlls.push(this.tableList[i].id);
					if(this.checkBoxAll.length == this.tableList.length) {
						this.checkAll = true;
					}
				};
				console.log(this.shelvesAlls);
			},
            // 全选与全不选
			handerCheckAll(){
				this.checkAll = !this.checkAll;
				let arr = this.tableList.length;
				this.checkBoxAll = [];
				this.shelvesAlls = [];
				
				if(this.checkAll){
					for(let i=0;i<arr;i++){
						this.checkBoxAll.push(i);
					}
					this.checkBoxAll.map(v => {
					this.shelvesAlls.push(this.tableList[v].id.toString());;
				})
				}else {
					this.checkBoxAll = [];
					this.shelvesAlls = []
				}
				console.log(this.shelvesAlls);
			},

        	handleSizeChange(val) {
				this.pageSize = val;
				this.getEstateList()
			},
			handleCurrentChange(val) {
			    this.page = val;
				this.getEstateList()
			},
    }
}
</script>

<style lang="less" scoped>
@import 'index.less';
</style>
